<template>
  <div class="page-container detail">
    <div>
      <el-tabs v-model="activeName">
        <el-tab-pane v-for="t in tabsList" :label="t.label+'(' + t.num + ')'" :name="t.name"></el-tab-pane>
      </el-tabs>
    </div>
    <div style="flex-grow: 1">
      <div style="height: 100%;display: flex;flex-direction: column;box-sizing: border-box;">
        <div>
          <div style="padding: 15px;box-sizing: border-box;">

<!--            <el-button @click="handleEmployee">员工查询</el-button>-->

            <el-button @click="handleInventory" style="margin-left: 12px;">盘点</el-button>
            <el-dropdown trigger="click" style="margin-left: 12px;">
              <el-button class="ui_rfid_manager">
                盘盈
                <i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="handleAddProfit">添加盘盈</el-dropdown-item>
                  <el-dropdown-item @click="handleEditProfit">修改盘盈</el-dropdown-item>
                  <el-dropdown-item @click="handleDelProfit">删除盘盈</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>

            <el-button style="margin-left: 15px;" type="primary" @click="handleSub">提交结果</el-button>
          </div>
        </div>
        <div style="flex-grow: 1">
          <div style="height: 100%">
            <vxe-table ref="table" height="100%" v-loading="tableData.loading" :data="tableData.list">
              <vxe-column type="checkbox" width="55" align="center"/>
              <vxe-column title="状态" width="60" align="center" prop="state">
                <template #default="{ row }">
                  <state-tag :value="row.state"></state-tag>
                </template>
              </vxe-column>
              <vxe-column width="120" title="图片" align="center" prop="number">
                <template #default="{ row }">
                  <image-show :img-url="row.imgUrl"></image-show>
                </template>
              </vxe-column>
              <vxe-column width="120" title="资产编码" align="center" field="number"/>
              <vxe-column width="180" title="资产名称" align="center" field="name"/>
              <vxe-column width="120" title="资产分类" align="center" field="categoryName"/>
              <vxe-column width="290" title="RFID" align="center" field="rfid"/>
              <vxe-column width="120" title="品牌" align="center" field="brand"/>
              <vxe-column width="120" title="型号" align="center" field="model"/>
              <vxe-column width="120" title="购置方式" align="center" field="buyWay"/>
              <vxe-column width="120" title="购置时间" align="center" field="buyTime">
                <template #default="scope">
                  <span>{{ scope.row.buyTime }}</span>
                </template>
              </vxe-column>
              <vxe-column width="120" title="购置金额" align="center" field="buyPrice"/>
              <vxe-column width="120" title="使用人" align="center" field="userName"/>
              <vxe-column width="120" title="管理员" align="center" field="adminName"/>
            </vxe-table>
          </div>

        </div>
      </div>
    </div>
    <pagination
        v-show="tableData.paging.total>0"
        :total="tableData.paging.total"
        v-model:page="tableData.paging.pageNum"
        v-model:limit="tableData.paging.pageSize"
        @pagination="getList"
    />

    <edit-profit ref="editProfitDialog" @sub="getList"></edit-profit>

    <operate ref="operateDialog" @sub="getList"></operate>
    <employee ref="employeeDialog"></employee>

    <inventory-tip-dialog ref="tipDialog" @sub="getList"></inventory-tip-dialog>
    <send-card ref="sendCardDialog" @sub="getList"></send-card>
    <RFIDDialog ref="rfidDialog" @sub="getList"></RFIDDialog>
  </div>


</template>

<script setup>

import {useRoute} from "vue-router";
import api from './api.js'
import SendCard from './sendCard.vue'
import InventoryTipDialog from "@/views/asset/inventoryApply/inventory/InventoryTipDialog.vue";
import RFIDDialog from "@/components/Asset/RfidDialog";
import Operate from './operate.vue'
import ImageShow from "@/components/Common/ImageShow.vue";
import StateTag from "@/views/asset/inventoryApply/inventory/StateTag.vue";
import Employee from "./employee.vue"
import EditProfit from "./editProfit.vue";


const {proxy} = getCurrentInstance();

const route = useRoute();

const activeName = ref('all');
const tabsList = reactive([{
  label: '全部',
  name: 'all',
  num: 0
}, {
  label: '未盘',
  name: 'draft',
  num: 0
}, {
  label: '正常',
  name: 'normal',
  num: 0
}, {
  label: '盘亏',
  name: 'loss',
  num: 0
}, {
  label: '盘盈',
  name: 'profit',
  num: 0
}, {
  label: '待确认',
  name: 'to_confirm',
  num: 0
}]);

const editProfitDialog = ref();
const sendCardDialog = ref();
const tipDialog = ref();
const rfidDialog = ref();
const operateDialog = ref();
const employeeDialog = ref();

// 遮罩层
const loading = ref(false);
// 导出遮罩层
const exportLoading = ref(false);
const table = ref();
const tableData = reactive({
  loading: false,
  list: [], // 表格列表数据
  paging: {
    total: 0, // 总条数
    pageNum: 1,
    pageSize: 10,
  }
});

const initQueryParams = {
  pageNum: 1,
  pageSize: 10,
  number: null,
  name: null,
  categoryId: null,
  rfid: null,
  brand: null,
  model: null,
  buyWay: null,
  buyTime: null,
  buyPrice: null,
  adminId: null
}

const queryParams = reactive({...initQueryParams})

/** 查询资产清单表列表 */
async function getList() {
  const detailId = route.params.detailId;
  loading.value = true;
  const {pageNum, pageSize} = tableData.paging;
  const query = {...queryParams};
  const pageReq = {page: pageNum - 1, size: pageSize};
  api.list(query, pageReq, detailId).then(response => {

    const {content, totalElements} = response
    tableData.list = content;
    tableData.paging.total = totalElements;
    tableData.loading = false;
  });
}

/** 查询资产清单表列表 */
async function getResult() {
  const detailId = route.params.detailId;
  const response = await api.getResult(detailId);

  for (const key in response) {
    const item = tabsList.find(item => item.name === key);
    item.num = response[key];
  }
}

// 表单重置
function reset() {
  Object.assign(queryParams, initQueryParams)
}

/**
 * 员工查询
 */
function handleEmployee() {
  employeeDialog.value.open([]);
}

/** 搜索按钮操作 */
function handleQuery() {
  tableData.paging.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  reset();
  handleQuery();
}

function handleAddProfit() {
  const detailId = route.params.detailId;
  editProfitDialog.value.open(null, detailId);
}

function handleEditProfit() {
  const rows = table.value.getCheckboxRecords();
  if (rows.length === 0) {
    proxy.$message.warning('请选择需要编辑的盘盈');
    return;
  }
  if (rows.length > 1) {
    proxy.$message.warning('只能编辑一个盘盈');
    return;
  }
  const one = rows[0];
  if (one.state !== 3) {
    proxy.$message.warning('只能编辑盘盈');
    return;
  }
  const detailId = route.params.detailId;
  editProfitDialog.value.open(one, detailId);
}

async function handleDelProfit() {
  const rows = table.value.getCheckboxRecords();
  if (rows.length === 0) {
    proxy.$message.warning('请选择需要删除的盘盈');
    return;
  }

  for(const one of rows) {
    if (one.state !== 3) {
      proxy.$message.warning('只能删除盘盈');
      return;
    }
  }

  await api.del(rows.map(item=>item.id).join(','));

}

function handleInventory() {
  const rows = table.value.getCheckboxRecords();
  if (rows.length === 0) {
    proxy.$message.warning('请选择需要打印的项');
    return;
  }
  operateDialog.value.open(rows);
}

/** 提交结果按钮操作 */
function handleSub() {
  const detailId = route.params.detailId;
  tipDialog.value.open(detailId);
}

/** 盘点按钮操作 */
function handleRFIDInventory() {
  rfidDialog.value.open();
}

/** 盘点按钮操作 */
function handleStopInventory() {

  // 获取选中的行
  const rows = table.value.getSelectionRows();
  const ids = rows.map(item => {
    return item.id;
  });
  api.stopInventory().then(response => {
    getList();
  })
}


function handleFinish(row) {
  api.finish(row.id).then(response => {
    getList();
  })
}


// 页面打开后获取列表数据
onMounted(async () => {
  await getList();
  await getResult();
  // await getTreeData();
});
</script>
  